<template>
    <div>
        <musicPage :musicObj="musicObj" />
    </div>
</template>
<script>
import { getMusicList, getMusicListComment } from '../../api/musicList'
import musicPage from '../../components/musicPage'

export default {
    components: {
        musicPage
    },
    data() {
        return {
            musicObj: {
                // 封面图
                coverImgUrl: '',
                // 歌单简介
                // 标题
                title: '',
                sheetDesc: '',
                // 创建者
                creatorInfo: {},
                // 歌曲列表
                musicList: [],
                // 歌单评论
                hotComments: [],
                // 评论总数
                commentTotal: 0
            }
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
    },
    async mounted() {
        const res = await getMusicList({ id: 7095057417, s: 0 })
        this.musicObj.sheetDesc = res.playlist.description
        this.musicObj.coverImgUrl = res.playlist.coverImgUrl
        this.musicObj.creatorInfo = res.playlist.creator
        this.musicObj.title = res.playlist.name
        this.musicObj.musicList = res.playlist.tracks.map((item, index) => {
            return {
                id: item.id,
                order: index,
                musicname: item.name,
                songer: item.ar[0].name,
                time: this.$moment(item.dt).format("mm:ss")
            }
        })
        const res2 = await getMusicListComment({ id: 7095057417, offset: 0, limit: 50 })
        this.musicObj.hotComments = res2.hotComments
        this.musicObj.commentTotal = res2.total
    }
}
</script>
<style  scoped>
.musicListBox {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}
/* 左边 */
.musicListLeft {
    width: 30%;
    height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.musicListImg {
    width: 200px;
    height: 200px;
}
.musicListImg img {
    width: 100%;
    height: 100%;
}
/* 右边 */
.musicListRight {
    width: 70%;
}
.authorInfo {
    width: 140px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.musicListRightBtn {
    display: flex;
    margin-bottom: 30px;
}
.musicListRightBtn div {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    margin-right: 20px;
}
.musicListRightBtn div .iconfont {
    font-size: 20px;
    line-height: 40px;
}

/* 评论区 */
/* .musicListComment {
} */

.each-Comment {
    width: 100%;
    display: flex;
    margin: 16px 0 20px;
}
.each-CommentImg {
    width: 42px;
    height: 42px;
}
.each-CommentImg img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.each-CommentName {
    font-size: 16px;
    font-weight: bolder;
}
</style>
